<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import HeaderVue from "@/components/Header.vue";
import FooterVue from "@/components/Footer.vue";
import MainBody from "@/components/MainBody.vue";
import { Server } from "../stores/ajax";
import { Delta, QuillEditor } from "@vueup/vue-quill";
import { Right, Check } from "@element-plus/icons-vue";
const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

let tableData = $ref([
  {
    aid: 0,
    title: "",
    content: {},
  },
]);
tableData = [];
const refresh = async () => {

};
refresh();
</script>

<template>
  <!-- <el-affix style="width: 100%;"> -->
  <header>
    <HeaderVue />
  </header>
  <!-- </el-affix> -->
  <main>
    <div class="main-container">
      <MainBody />
    </div>
  </main>
  <FooterVue />
</template>

<style scoped>


/* 限制中间内容区的宽度为80% */
.main-container {
  width: 80%;
  height: 100%;
}
/* 设置内容区基本 */
main {
  display: flex;
  justify-content: center;
  height: 2000px;
  width: 100%;
}

:root {
  --color-main: rgb(112, 48, 160);
  --el-menu-hover-text-color: #000;
  --el-menu-hover-bg-color: #fff;
}

#app,
body,
html {
  max-width: 100%;
}

.el-menu--horizontal {
  width: 100%;
  justify-content: center;
}

.main_block .title__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-basis: 760px;
  margin: 80px 20px 40px;
}

.join-us-card .button {
  width: max-content;
  font-size: 0.7em;
  margin: 10px 20px;
  cursor: pointer;
  line-height: 20px;
  border-bottom: var(--color-main) 2px solid;
}

.join-us-card .content {
  font-size: 0.7em;
  margin: 10px 20px;
  line-height: 30px;
  zoom: 0.9;
}

.join-us-card {
  flex-basis: 240px;
  background-color: white;
  border-radius: 10px;
  text-align: left;
}

.join-us-card .title {
  padding-left: 20px;
  background-color: rgb(214, 168, 252);
  line-height: 50px;
  font-size: 1.3em;
  letter-spacing: 10px;
}

.main_block h1 {
  font-size: 45px;
  justify-self: start;
  align-self: center;
}

.main_block .more {
  line-height: 25px;
  justify-self: end;
  align-self: center;
  border-bottom: var(--color-main) 2px solid;
  cursor: pointer;
}

.main_block .more:hover {
  color: var(--color-main);
}

.main_block > h1 {
  margin: 27px 0;
}

.main_block {
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
}

.b1 .r3c {
  margin: 0 25px;
}

.b1 .r3c .num {
  color: var(--color-main);
}

.r5card {
  flex-basis: 365px;
  flex-wrap: wrap;
  height: 180px;
  border-radius: 10px;
  text-align: left;
  background-size: cover;
  color: white;
  position: relative;
  overflow: hidden;
}

.r5card .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #fff0, #0008, #000);
  z-index: 10;
}

.r5card .content {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.editer1 .ql-editor {
  padding: 0;
}
</style>
